<template>
    <!-- 经营分析第二屏 -->
    <div class="manageB-container">
        <div class="left">
            <div class="markBg">
                <div class="markBg-box-title" style="width: 126px;">酒店数据统计</div>
                <div class="markBg-box-content">
                    <!--<div class="title-box">-->
                        <!--<p>酒店收入统计</p>-->
                        <!--<span class="box-border"></span>-->
                    <!--</div>-->
                    <div class="lineTitle">
                        <span>酒店收入统计</span>
                        <div>
                            <span class="emptyLine" style="width: 220px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.todayIncome}}</span>
                                <u>元</u>
                            </div>
                            <div class="bottom">今日收入</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.yesterdayIncome}}</span>
                                <u>元</u>
                            </div>
                            <div class="bottom">昨日收入</div>
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.ratio}}</span>
                                <u>%</u>
                            </div>
                            <div class="bottom">日环比</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.income}}</span>
                                <u>元</u>
                            </div>
                            <div class="bottom">总收入</div>
                        </div>
                    </div>
                    <!--<div class="title-box">-->
                        <!--<p>酒店收入统计</p>-->
                        <!--<span class="box-border"></span>-->
                    <!--</div>-->
                    <div class="lineTitle">
                        <span>今日酒店房间数量</span>
                        <div>
                            <span class="emptyLine" style="width: 200px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.hotelInNumber}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">酒店在店人数</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.hotelBookingNumber}}</span>
                                <u>间</u>
                            </div>
                            <div class="bottom">酒店可预约客房数量</div>
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.hotelLetNumber}}</span>
                                <u>间</u>
                            </div>
                            <div class="bottom">酒店出租客房数量</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{hotelDataObj.hotelResidueNumber}}</span>
                                <u>间</u>
                            </div>
                            <div class="bottom">酒店剩余客房数量</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="markBg">
                <div class="markBg-box-title" style="width: 120px;cursor: pointer;" @click="openWindow">投诉分析<i class="threeBar" title="打开当日投诉数据统计列表"></i></div>
                <div class="markBg-box-content" style="padding: 10px 10px 0 10px;">
                    <!--<div class="title-box">-->
                        <!--<p>投诉数据统计</p>-->
                        <!--<span class="box-border"></span>-->
                    <!--</div>-->
                    <div class="lineTitle">
                        <span>投诉数据统计</span>
                        <div>
                            <span class="emptyLine" style="width: 220px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{complaintObj.totalNumber}}</span>
                                <u>件</u>
                            </div>
                            <div class="bottom">总投诉数量</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{complaintObj.monthNumber}}</span>
                                <u>件</u>
                            </div>
                            <div class="bottom">本月投诉数量</div>
                        </div>
                    </div>
                    <!--<div class="title-box" style="margin-bottom: 20px;">-->
                        <!--<p>当日投诉数据统计</p>-->
                        <!--<i class="threeBar" title="打开当日投诉数据统计列表" @click="openWindow"></i>-->
                        <!--<span class="box-border" style="width: 55%;margin-left: 20px;"></span>-->
                    <!--</div>-->
                    <div class="lineTitle">
                        <span>今日投诉数据统计</span>
                        <div style="margin-left: 20px;">
                            <span class="emptyLine" style="width: 180px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div class="botCharts">
                        <div id="devicePie" style="width: 100%; height: 150px;"></div>
                        <div class="numStyle numStyle1">{{complaintObj.dayNumber}}</div>
                        <div class="numStyle numStyle2">件</div>
                        <div class="rateBox rateBox1" style="width:56%;">
                            <div style="margin-right: 0px;width: 50% !important;" v-for="(item,index) in pieArr" :key="index">
                                <div>
                                    <b>{{item.number}}</b><u>件</u>
                                </div>
                                <div>
                                    <i :class="'icolor' + (index + 1)"></i><span>{{item.typeName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="lineTitle">-->
                        <!--<span>近七天事件数据</span>-->
                        <!--<div>-->
                            <!--<img src="../../static/img/common/dottedLine.png" width="200px;">-->
                            <!--<img src="../../static/img/common/dian.png" class="dian">-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="lineTitle">
                        <span>近七天事件数据</span>
                        <div>
                            <span class="emptyLine" style="width: 210px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" style="width: 230px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div class="weekDatasTitle">
                        <i></i><span>近七天投诉总事件数量</span><b>{{sevenAfToalNum}}</b>
                    </div>
                    <div id="sevenThings" style="width: 380px;height: 185px;"></div>
                </div>
            </div>
        </div>

        <!--弹窗数据-->
        <div class="alertWindow" v-show="alertWindowShow" ref="windowBox">
            <div class="title">今日投诉事件分析</div>
            <div class="windowBox clearfix">
                <span class="closeWindow" @click="openWindow" title="关闭今日投诉事件分析"></span>
                <div class="headTitle">
                    <span>名称</span>
                    <span>类型</span>
                    <span>时间</span>
                    <span>状态</span>
                </div>
                <div class="mainCon" v-for="(item,index) in tableData" :key="index">
                    <span>{{item.affairName}}</span>
                    <span>{{item.typeName}}</span>
                    <span>{{item.affairTime}}</span>
                    <span v-if="item.status == 1 || item.status == 2" class="noHandle">未处理</span>
                    <span v-if="item.status == 3">已处理</span>
                </div>
                <el-pagination
                        layout="prev, pager, next"
                        align="center"
                        :page-size="10"
                        :current-page.sync="currentPage"
                        @current-change="handleCurrentChange"
                        style="position: absolute;left: 0;bottom: 20px;right: 0;"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { hotelData, todayComplaint, sevenComplaint, tsTable, } from '../../axios/manage/index'
    import moment from 'moment'
    export default {
        name: "manageB",
        data() {
            return{
                hotelDataObj:{},
                complaintObj:{},
                pieArr:[],
                dayAllNum:0,
                sevenAfToalNum:0,
                sevenAfObj:{},
                alertWindowShow:false,
                tableData: [],
                page: 1,
                rows: 10,
                currentPage: 1,
                total: 0,
                timer:null,
            }
        },
        mounted() {
            this.getHotelData();
            this.getTodayComplaint();
            this.getSevenComplaint();
            this.closeTheWindow();

            this.realTimeInit();
        },
        methods: {
            realTimeInit() {
                //实时数据刷新 10s一次
                let that = this;
                this.timer = setInterval(function () {
                    that.getHotelData();
                    that.getTodayComplaint();
                    that.getSevenComplaint();
                },10000)
            },
            closeTheWindow() {
                document.addEventListener('mouseup',(e) =>{
                    let box = this.$refs.windowBox
                    if (box) {
                        if (!box.contains(e.target)) {
                            this.alertWindowShow = false
                        }
                    }
                })
            },
            openWindow() {
                this.alertWindowShow = !this.alertWindowShow;
                this.currentPage = 1;
                this.page = 1;
                this.getTsTable();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getTsTable();
            },
            getHotelData() {
                hotelData().then(res => {
                    this.hotelDataObj = res.data;
                }, err => {
                })
            },
            getTsTable() {
                let params = {
                    type:4,
                    data:{
                        size:this.rows,
                        current:this.page
                    }
                }
                tsTable(params).then(res => {
                    console.log(res)
                    this.total = res.data.total;
                    this.tableData = res.data.records;
                }, err => {
                })
            },
            getTodayComplaint() {
                let params = {
                    type:4
                }
                todayComplaint(params).then(res => {
                    console.log(res)
                    this.complaintObj = res.data;
                    this.pieArr = res.data.oneList;
                    for (var i = 0; i < this.pieArr.length; i++) {
                        this.dayAllNum += this.pieArr[i].number;
                    }
                }, err => {
                })
            },
            getSevenComplaint() {
                let params = {
                    type:2
                }
                sevenComplaint(params).then(res => {
                    let dateArr = [];
                    let otherArr = [];
                    let parkArr = [];
                    let workerArr = [];
                    let hotelArr = [];
                    let noAccArr = [];
                    let tatal1 = 0;
                    let tatal2 = 0;
                    let tatal3 = 0;
                    let tatal4 = 0;
                    let tatal5 = 0;
                    for(var i = 0; i < res.data.length; i++) {
                        let date = moment().subtract('days', i).format('MM-DD');
                        dateArr.push(date);
                        otherArr.push(res.data[i].number1);
                        parkArr.push(res.data[i].number2);
                        workerArr.push(res.data[i].number3);
                        hotelArr.push(res.data[i].number4);
                        noAccArr.push(res.data[i].number5);
                        tatal1 += res.data[i].number1;
                        tatal2 += res.data[i].number2;
                        tatal3 += res.data[i].number3;
                        tatal4 += res.data[i].number4;
                        tatal5 += res.data[i].number5;
                    }
                    this.sevenAfObj = {
                        dateArr:dateArr,
                        otherArr:otherArr,
                        parkArr:parkArr,
                        workerArr:workerArr,
                        hotelArr:hotelArr,
                        noAccArr:noAccArr
                    }
                    this.sevenAfToalNum = tatal1 + tatal2 + tatal3 + tatal4 + tatal5;
                }, err => {
                })
            },
            sevenThingsInit() {
                var myChart = this.$echarts.init(document.getElementById('sevenThings'));
                const dateArr = this.sevenAfObj.dateArr;
                const otherArr = this.sevenAfObj.otherArr;
                const parkArr = this.sevenAfObj.parkArr;
                const workerArr = this.sevenAfObj.workerArr;
                const hotelArr = this.sevenAfObj.hotelArr;
                const noAccArr = this.sevenAfObj.noAccArr;
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        }
                    },
                    legend: [
                        {
                            orient: 'horizontal',
                            x: '10%',
                            y: '86%',
                            align: 'left',
                            data: ['酒店'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                        {
                            orient: 'horizontal',
                            x: '25%',
                            y: '86%',
                            align: 'left',
                            data: ['景区设施'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                        {
                            orient: 'horizontal',
                            x: '44%',
                            y: '86%',
                            align: 'left',
                            data: ['其他'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                        {
                            orient: 'horizontal',
                            x: '57%',
                            y: '86%',
                            align: 'left',
                            data: ['工作人员'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        },
                        {
                            orient: 'horizontal',
                            x: '75%',
                            y: '86%',
                            align: 'left',
                            data: ['未受理'],
                            textStyle: {
                                fontSize: 10,
                                color: '#B2CEEC'
                            },
                            itemHeight: 5, //修改icon图形大小
                            itemWidth: 5, //修改icon图形大小
                        }
                    ],
                    grid: {
                        top: 0,
                        left: 50,
                        right: 30,
                        bottom: 50
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#B2CEEC',
                            fontSize: 10

                        },
                        splitArea: {
                            show: false
                        },
                        minInterval: 1,
                        max: function (value) {
                            if( value.max <= 1 ){
                                return value.max  = 10;
                            }if( value.max < 10 ){
                                return value.max = 10
                            }else{
                                return value.max;
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#B2CEEC',
                            fontSize: 10
                        },
                        data: dateArr
                    }],
                    series: [
                        {
                            name: '酒店',
                            type: 'bar',
                            stack: '总量',
                            barMaxWidth: 8,
                            barGap: '10%',
                            itemStyle: {color: '#FFAD95'},
                            data: hotelArr
                        },
                        {
                            name: '景区设施',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {color: '#EEFD7B'},
                            data: parkArr
                        },
                        {
                            name: '其他',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {color: '#32E9FF'},
                            data: otherArr
                        },
                        {
                            name: '工作人员',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {color: '#2BADFF'},
                            data: workerArr
                        },
                        {
                            name: '未受理',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {color: '#1FFE9A'},
                            data: noAccArr
                        },
                    ]
                }
                myChart.setOption(option)
            },
            devicePieInit() {
                var myChart = this.$echarts.init(document.getElementById('devicePie'));
                let dataArr = [];
                let colorArr = ['#2BADFF', '#FFAD95', '#32E9FF', '#EEFD7B', '#1FFE9A'];
                for (var i = 0; i < this.pieArr.length; i++) {
                    dataArr.push({
                        name: this.pieArr[i].typeName,
                        value: this.pieArr[i].number,
                        itemStyle: {color: colorArr[i]}
                    })
                }
                console.log(dataArr)
                const options = {
                    title: {
                        text: '当日总事件数量',
                        left: '9%',
                        bottom: '-1%',
                        align: 'center',
                        textStyle: {
                            fontSize: 10,
                            color: '#B2CEEC'
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['58%', '75%'],
                            center: ['20%', '45%'],
                            avoidLabelOverlap: true,
                            hoverAnimation: false,
                            startAngle: 30,
                            emphasis: {},
                            label: {
                                show: false,
                                fontSize: 20,
                                formatter: '{b}\n{c}'
                            },
                            labelLine: {
                                show: true,
                                length: 20,
                                length2: 20
                            },
                            markLine: {
                                silent: true
                            },
                            data: dataArr
                        }
                    ]
                }
                myChart.setOption(options)
            },
        },
        watch: {
            pieArr(val) {
                this.devicePieInit();
            },
            sevenAfObj(val) {
                this.sevenThingsInit();
            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }
    }
</script>

<style scoped lang="scss">
    .manageB-container {
        width: 388px;
        background: rgba(0, 11, 26, 0.6);
        position: fixed;
        top: 88px;
        left: 20px;
        bottom: 19px;
        border-top: 1px solid #47BDFF;
        .left::-webkit-scrollbar-thumb {
            background: #99a9bf63 !important;
            border-radius: 20px !important;
        }

        .left::-webkit-scrollbar-track-piece {
            background: #141835 !important;
        }

        .left::-webkit-scrollbar {
            width: 6px !important;
            height: 6px !important;
        }

        .markBg {
            border-top: 1px solid #47BDFF;
        }

        .left {
            width: 100%;
            height: 100%;
            background: rgba(11, 34, 63, 0.5);
            overflow-y: scroll;
            overflow-x: hidden;

            .markBg-box-title {

                font-size: 16px;
                height: 34px;
                line-height: 34px;
                background: url("../../static/visitor/img/ageBox.png") no-repeat 100% 100%;
                background-size: 100% 100%;
                text-indent: 9px;
                color: #fff;
                padding-right: 20px;
                display: inline-block;

            }

            .markBg-box-content {
                padding: 10px;

                .item {
                    display: flex;
                    margin-left: 35px;
                    margin-right: 25px;

                    p {
                        font-size: 14px;
                        color: #97D0F4;
                        line-height: 75px;
                        margin-left: 37px;

                        span {
                            font-size: 20px;
                            margin-left: 15px;
                            margin-right: 5px;
                            color: #4DFFEC;
                        }
                    }

                    img {
                        width: 81px;
                        height: 75px;
                    }
                }

                .parkNumBox {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    margin-bottom: 20px;
                    .parkNumItem {
                        width: 160px;
                        height: 44px;
                        background: url("../../static/traffic/img/parkNumBg.png") no-repeat 100% 100%;
                        background-size: 100% 100%;
                        text-align: center;
                        color: #97D0F4;

                        span {
                            font-size: 20px;
                            color: #fff;
                            font-family: PMZD, serif;
                            position: relative;
                            top: 1px;
                        }

                        u {
                            text-decoration: none;
                            font-size: 12px;
                            margin-left: 4px;
                        }

                        .top {
                            margin-bottom: 9px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .bottom{
                            font-size: 12px;
                        }
                    }
                }

                .title-box {
                    margin-top: 10px;
                    p {
                        font-size: 14px;
                        display: inline-block;
                    }
                    .box-border {
                        border: 1px dashed rgba(77, 255, 236, 0.8);
                        width: 70%;
                        display: inline-block;
                        content: '';
                        /* line-height: 50px; */
                        position: relative;
                        top: -4px;
                        margin-left: 10px;
                    }
                }
                .lineTitle {
                    font-size: 14px;
                    color: #fff;
                    line-height: 14px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 11px;
                    width: 100%;
                    box-sizing: border-box;
                    margin: 10px 0 10px 0;
                    .dian {
                        margin-left: 4px;
                    }
                }

                .botCharts {
                    padding: 0 11px;
                    height: 150px;
                    position: relative;

                    .rateBox {
                        color: #97D0F4;
                        font-size: 12px;
                        position: absolute;
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        >div{
                            margin-bottom: 10px;
                        }
                        b {
                            font-size: 18px;
                            margin: 0 5px 0 13px;
                            color: #fff;
                        }

                        u {
                            text-decoration: none;
                        }

                        i {
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            margin-right: 5px;
                        }

                        .icolor1 {
                            background: #2BADFF;
                        }

                        .icolor2 {
                            background: #FFAD95;
                        }

                        .icolor3 {
                            background: #32E9FF;
                        }

                        .icolor4 {
                            background: #EEFD7B;
                        }
                        .icolor5 {
                            background: #1FFE9A;
                        }
                    }

                    .rateBox1 {
                        top: 20px;
                        left: 155px;
                    }

                    .rateBox2 {
                        top: 80px;
                        left: 155px;
                    }

                    .numStyle {
                        color: #fff;
                        position: absolute;
                        width: 80px;
                        text-align: center;
                    }

                    .numStyle1 {
                        font-size: 20px;
                        top: 50px;
                        left: 42px;
                        font-family: PMZD, serif;
                    }

                    .numStyle2 {
                        font-size: 12px;
                        top: 80px;
                        left: 42px;
                    }
                }

                .weekDatasTitle {
                    font-size: 12px;
                    line-height: 12px;
                    color: #97D0F4;
                    margin: 10px;

                    i {
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        transform: rotateZ(45deg);
                        background: #97D0F4;
                        margin-right: 8px;
                        position: relative;
                        top: -2px;
                    }

                    b {
                        color: #fff;
                        font-size: 14px;
                        margin-left: 8px;
                        font-family: PMZD, serif;
                    }
                }

                .botCharts {
                    padding: 0 11px;
                    height: 150px;
                    position: relative;

                    .rateBox {
                        color: #97D0F4;
                        font-size: 12px;
                        position: absolute;
                        display: flex;
                        justify-content: space-between;

                        b {
                            font-size: 18px;
                            margin: 0 5px 0 13px;
                            color: #fff;
                        }

                        u {
                            text-decoration: none;
                        }

                        i {
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            margin-right: 5px;
                        }

                        .icolor1 {
                            background: #2BADFF;
                        }

                        .icolor2 {
                            background: #FFAD95;
                        }

                        .icolor3 {
                            background: #32E9FF;
                        }

                        .icolor4 {
                            background: #EEFD7B;
                        }
                        .icolor5 {
                            background: #1FFE9A;
                        }
                    }

                    .rateBox1 {
                        top: -3px;
                        left: 155px;
                    }

                    .rateBox2 {
                        top: 80px;
                        left: 155px;
                    }

                    .numStyle {
                        color: #fff;
                        position: absolute;
                        width: 80px;
                        text-align: center;
                    }

                    .numStyle1 {
                        font-size: 20px;
                        top: 50px;
                        left: 42px;
                    }

                    .numStyle2 {
                        font-size: 12px;
                        top: 80px;
                        left: 42px;
                    }
                }
            }
        }
        .threeBar{
            display: inline-block;
            width: 11px;
            height: 8px;
            background: url("../../static/img/common/threeBar.png") no-repeat 100% 100%;
            background-size: 100% 100%;
            position: relative;
            left: 10px;
            cursor: pointer;
            padding: 3px;
        }
        .alertWindow{
            position: absolute;
            height: 550px;
            top: 150px;
            width: 1000px;
            left: 620px;
            background: url("../../static/traffic/img/bugWinBg.png") no-repeat center center;
            background-size: 100% 100%;
            .title{
                font-size: 24px;
                color: #FFFFFF;
                height: 40px;
                line-height: 56px;
                width: 100%;
                text-align: center;
            }
            .windowBox{
                .closeWindow{
                    display: inline-block;
                    width: 30px;
                    height: 40px;
                    float: right;
                    cursor: pointer;
                    position: relative;
                }
            }
            .headTitle{
                width: 100%;
                height: 20px;
                font-size: 20px;
                line-height: 20px;
                color: #fff;
                display: flex;
                padding-bottom: 20px;
                margin-top: -10px;
                border-bottom: 2px solid rgba(82,120,167,0.5);
                margin-bottom: 14px;
                span{
                    display: inline-block;
                    width: 25%;
                    text-align: center;
                }
            }
            .mainCon{
                width: 100%;
                height: 36px;
                font-size: 18px;
                line-height: 36px;
                color: #D0EDFF;
                display: flex;
                span{
                    display: inline-block;
                    width: 25%;
                    text-align: center;
                }
                .noHandle{
                    color: #FF5A5A;
                }
            }
        }
        .lineTitle{
            font-size: 14px;
            color: #fff;
            line-height: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 11px;
            width: 100%;
            box-sizing: border-box;
            margin: 10px 0 10px 0;
            .emptyLine{
                display: inline-block;
                border-top: 1px dashed rgba(77,255,236,0.7);
                position: relative;
                top: -4px;
            }
            .dian{
                margin-left: 4px;
            }
        }
    }
</style>